<template>
  <div>
    <nav class="toback">
       <router-link to="/repayment">
         <Icon type="chevron-left" class="toleft" />
       </router-link>
       <p class="search"></p>
       <p>绑定信用卡</p>
    </nav>

    <div class="wykh_span">
      <div class="wykh_text">发卡行</div>
      <div class="wykh_input">
        <i-select v-model="form.bankId" style="width:200px">
          <i-option v-for="item in cardList" :value="item.bankId" :key="item.bankId">{{ item.bankName }}</i-option>
        </i-select>
      </div>
      <hr class="wykh_hr"/>
    </div>

      <div class="wykh_span">
        <div class="wykh_text">信用卡号</div>
        <div class="wykh_input"><input type="text" v-model="form.cardNum" placeholder="请输入信用卡号"/></div>
        <hr class="wykh_hr"/>
      </div>

      <div class="wykh_span">
        <div class="wykh_text">持卡人</div>
        <div class="wykh_input"><input type="text" v-model="this.$store.state.user.username" placeholder="请输入持卡人姓名"/></div>
        <hr class="wykh_hr"/>
      </div>

      <div class="wykh_span">
        <div class="wykh_text">账单日</div>
        <div class="wykh_input">
          <select v-model="form.sdate"  style="width:200px">
            <option v-for="item in 31" :value="item" :key="item">每月{{ item }}日</option>
          </select>
        </div>
        <hr class="wykh_hr"/>
      </div>

    <div class="wykh_span">
      <div class="wykh_text">还款日</div>
      <div class="wykh_input">
        <select v-model="form.rdate" style="width:200px">
          <option v-for="item in 31" :value="item" :key="item">每月{{ item }}日</option>
        </select>
      </div>
      <hr class="wykh_hr"/>
    </div>

    <div class="btn" @click="handleSubmit">确定</div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
export default {
  name: "AddCard",
  data() {
    return {
      form: {
        cardNum: "",
        cardOwner: "",
        sdate: "",
        rdate: "",
        bankName:'',
        bankId: ""
      },
      cardList: []
    };
  },
  created() {
    var _this = this;
    axios
      .post("/web/api/bank/list")
      .then(function(res) {
        var data = res.data.date;
        console.log("cardList o", data);
        var dataF = [];
        data.forEach(function(item) {
          if (item.status === 1) {
            dataF.push(item);
          }
        });
        _this.cardList = dataF;
        console.log("dataF", dataF);
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
    handleSubmit() {
      if (this.form.cardNum.length == 16) {
        var _this = this;
        console.log(this.$store.state.user);
        axios
          .post("/web/api/card/addCard", {
            cardNumber: this.form.cardNum,
            bankId: this.form.bankId,
            cardUserId: this.$store.state.user.userId,
            statementDate: this.form.sdate,
            repaymentDate: this.form.rdate
          })
          .then(function(res) {
            console.log(res);
            _this.$Message.success("恭喜您，添加成功。");
            _this.$router.push("/repayment");
          })
          .catch(function(error) {
            console.log(error);
          });
      }else{
        this.$Message.error("请输入正确的卡号");
      }
    },
    success() {
      this.$Message.success("This is a success tip");
    },
    warning() {
      this.$Message.warning("This is a warning tip");
    },
    error() {
      this.$Message.error("This is an error tip");
    }
  }
};
</script>
<style lang="stylus" scoped>
.toback {
  width: 100%;
  font-size: 1.8rem;
  line-height: 2.6;
  background: #358ff0;

  p {
    text-align: center;
    color: #ffffff;
  }

  .toleft {
    float: left;
    font-size: 2.2rem;
    color: #ffffff;
    padding: 1rem 2rem;
  }

  .search {
    width: 5rem;
    color: #ffffff;
    height: 2.2rem;
    line-height: 2.6;
    float: right;
    font-size: 1.8rem;
  }
}

.wykh_span {
  margin-top: 1rem;
  width: 100%;

  .wykh_text {
    width: 40%;
    height: 1.5rem;
    margin-left: 1rem;
    font-size: 0.8rem;
    line-height: 1.5rem;
    color: #666666;

    .add {
      color: #ff3737;
      float: right;
      padding-right: 1.5rem;
      font-size: 1.5rem;
    }
  }

  .wykh_input {
    margin-left: 1rem;
    height: 4rem;
    line-height: 4rem;

    input {
      margin-left: 1rem;
      width: 17rem;
      height: 2.5rem;
      border: none;
      outline: none;
      color: #666666;
    }

    input::-webkit-input-placeholder {
      color: #cccccc;
    }

    select {
      margin-left: 1rem;
      width: 90%;
      height: 2.5rem;
      border: none;
      outline: none;
      appearance: none;
      color: #666666;
    }

    .wykh_input_line {
      width: 100%;
      height: 2.5rem;
      line-height: 2.5rem;

      .wykh_input_chry {
        position: relative;
        margin-left: 3%;
        margin-right: 3%;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        float: left;
        width: 14%;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        border: 1.5px solid #FF3737;
        border-radius: 0.5rem;
        color: #666666;

        .wykh_input_chry_close {
          position: absolute;
          background: red;
          color: #ffffff;
          width: 0.8rem;
          height: 0.8rem;
          font-size: 0.5rem;
          line-height: 0.9rem;
          margin-top: -1.9rem;
          right: -5px;
          font-size: 0.5rem;
          -webkit-text-size-adjust: none;
          border-radius: 30%;
        }
      }
    }
  }

  .wykh_hr {
    margin-left: 4%;
    width: 92%;
    height: 1px;
    border: none;
    border-top: 1px solid #cccccc;
  }
}

.btn {
  margin-top: 2rem;
  margin-left: 10%;
  width: 80%;
  height: 2.8rem;
  background: #3b83c5 url('../../assets/img/Register/login_btn.png') no-repeat 100% 100%;
  text-align: center;
  line-height: 2.8rem;
  color: #ffffff;
  border-radius: 2rem;
}
</style>

